<template>
  <div class="login-bg">
    <div class="bg-img">
      <img src="http://f-s2.gitee.io/blogimagebed/bg-img.jpg" alt="">
    </div>
    <div class="login">
      <div class="login-box">
        <!-- 用户头像 -->
        <div class="avatar-box">
          <img src="http://f-s2.gitee.io/blogimagebed/avatar.gif" alt="">
        </div>
        <!-- 用户账户与密码 -->
        <el-form label-width="65px" 
        class="form-box" 
        :model="form" 
        :rules="rules"
        ref="loginFormRef"
        @keyup.enter.native="login">
          <el-form-item label="用户名" prop="username">
            <el-input placeholder="请输入用户名" v-model="form.username">
              <i slot="prefix" class="iconfont icon-usercenter"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input placeholder="请输入密码" v-model="form.password" show-password>
              <i slot="prefix" class="iconfont icon-password"></i>
            </el-input>
          </el-form-item>
          <!-- 验证码 -->
          <div class="verification-code">
            <el-input v-model="verification" />
            <div class="box" @click="creatNumb">
              <div class="nub" :style="`color: rgb${item.color}`" v-for="item in numbArr" :key="item.color">{{item.numb}}</div>
            </div>
          </div>
          <!-- 登录与重置按钮 -->
          <div class="btn-box">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="resetLoginForm">重置</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import {login_http, login_http2} from 'network/login.js';

  export default {
    name: 'Login',
    data() {
      let validatePass = (rule, value, callback) => {
        if(value === '') {
          callback(new Error('密码不能为空'))
        }else if(!/^[\w]{4,10}$/.test(value)) {
          callback(new Error('密码只能为数字、字母、下划线组成，且为4~10位'))
        }else {
          callback()
        }
      };
      return {
        verification: '',
        baseCode: '',
        numbArr: [],
        form: {
          username: 'admin',
          password: '123456'
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名/邮箱', trigger: 'blur' }
          ],
          password: [
            { required: true, validator: validatePass, trigger: 'blur' }
          ]
        },
        userArr: []
      }
    },
    methods: {
      resetLoginForm() {
        // 使用该组件自带的方法对表单及其检验结果进行重置
        this.$refs.loginFormRef.resetFields()
        this.verification = ''
        this.baseCode = ''
      },
      login() {
        if(!this.verification) return this.$message.error('请输入验证码！')
        if(this.verification != this.baseCode) return this.$message.error('验证码错误，请重新输入！')
        this.$refs.loginFormRef.validate(async valid => {
          if(!valid) return;
          if(this.userArr && !this.userArr.some(v => v.username === this.form.username && v.password === this.form.password) && this.form.username != 'admin')
            return this.$message.error('账号 / 密码错误!')
          this.$setCookie('is_admin', this.form.username == 'admin' ? 1 : 0)
          this.form.username != 'admin' && this.$setCookie('user_name', this.form.username)

        try {
          let res = await login_http({username: 'admin', password: '123456'})
          let res2 = await login_http({username: 'admin', password: '123456'})
          window.sessionStorage.setItem('token2', res2.data.token);
          const {status, msg} = res.meta;

          if(status !== 200) {
            this.$message.error(msg)
          }else {
            const {token, id, rid, mobile} = res.data;
            this.$message.success(msg);
            window.sessionStorage.setItem('token', token);
            this.$router.push('/home');
            // this.$router.replace('/home');
          }

        } catch (error) {
          console.log(error);
        }
        })
      },
      rgb() {
        let r = Math.floor(Math.random()*256)
        let g = Math.floor(Math.random()*256)
        let b = Math.floor(Math.random()*256)
        return `(${r}, ${g}, ${b}`
      },
      creatNumb() {
        this.numbArr = []
        this.baseCode = ''
        let baseColor = '(107, 107, 107)'
        let i = 0
        while(i < 4) {
          let color = this.rgb()
          let numb = Math.floor(Math.random()*10)
          this.baseCode += numb
          while(color == baseColor) {
            color = this.rgb()
          }
          this.numbArr.push({
            numb,
            color
          })
          i ++
        }
      }
    },
    created() {
      this.creatNumb()
      this.userArr = this.$getCookie('user_arr')
    }
  }
</script>
<style scoped>
  .login-bg {
    position: relative;
    height: 100%;
  }
  .bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .bg-img, img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .login {
    background-color: rgba(122, 122, 122, 0.6);
    height: 100%;
    position: relative;
  }
  .login-box {
    width: 450px;
    height: 300px;
    border-radius: 15px;
    
    background-color: rgba(255, 255, 255, .6);
    
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .avatar-box {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid rgba(87, 140, 240, 0.5);
    /* padding: 5px; */

    position: absolute;
    left: 50%;
    top: -35%;
    transform: translateX(-50%);
  }
  .avatar-box img {
    width: 100%;
    border-radius: 50%;
  }
  .avatar-box img:hover {
    transform: rotate(666turn);
    transition: all 59s 1s cubic-bezier(.34,0,.84,1);
  }
  .form-box {
    position: absolute;
    width: 100%;
    bottom: 0;

    box-sizing: border-box;

    padding: 0 30px 20px 20px;
  }
  .form-box /deep/ .el-form-item__label{
    color: rgb(0, 0, 0, .6);
    font-weight: bold;
  }
  .btn-box {
    display: flex;
    justify-content: flex-end;
  }
  .btn-box /deep/ .el-button {
    border-radius: 10px;
  }
  .form-box i {
    color: rgba(22, 22, 22, .6);
    font-size: 20px;
  }
  .verification-code {
    display: flex;
    justify-content: flex-end;
  }
  .verification-code .el-input {
    width: 100px;
    height: 50px;
  }
  .verification-code .box {
    user-select: none;
    width: 100px;
    height: 40px;
    background-color: rgb(107, 107, 107);
    border-radius: 5px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    letter-spacing: 4px;
  }
</style>
